<!-- src/components/HotCoursesComponent.vue -->
<template>
  <section class="hot-courses">
    <h3>热门课程</h3>
    <div class="courses-list">
      <CourseCard
        v-for="course in courses"
        :key="course.id"
        :title="course.title"
        :image="course.image"
        :rank="course.rank"
      />
    </div>
    <button class="view-all">查看全部 &gt;</button>
  </section>
</template>

<script setup>
const courses = [
  { id: 1, title: '一元二次方程', image: require('@/assets/course1.jpg'), rank: 1 },
  { id: 2, title: '高考英语全解', image: require('@/assets/course2.jpg'), rank: 2 },
  // 其他课程...
]
</script>

<style scoped>
.hot-courses {
  margin-top: 20px;
}
.courses-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.view-all {
  float: right;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
</style>